<template>
	<view>
		<view class="card" v-for="(item, index) in list" :key="index">
			<view class="text-container">
				<view>
					<h3>务实建筑施工安全教育 建筑安全 生产第一防线</h3>
				</view>
				<view>
					<p>4小时前</p>
				</view>
			</view>
			<view class="image-container">
				<img style="width: 200rpx; height: 200rpx; object-fit: contain"
					src="../../static/images/banner/banner01.jpg" alt="Construction" />
			</view>
		</view>
		<view>
			<u-loadmore  :status="status" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: "loadmore",
			list: 15,
			page: 0,
		};
	},
	onLoad() { },
	methods: {
		loadmore() {
			console.log(1111111)
			if (this.page >= 3) return;
			this.status = "loading";
			this.page = ++this.page;
			setTimeout(() => {
				this.list += 10;
				if (this.page >= 3) this.status = "nomore";
				else this.status = "loading";
			}, 2000);
		},
	},
};
</script>

<style lang="scss">
.card {
	display: flex;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	height: 200rpx;
}

.image-container {
	flex: 1;
}

.image-container img {
	width: 100%;
	height: auto;
	border-radius: 50rpx 50rpx;
	/* 圆角效果 */
}

.text-container {
	flex: 2;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.text-container h3 {
	margin: 0;
	font-size: 30rpx;
}

.text-container p {
	color: #888;
	font-size: 14px;
}
</style>
